<template>
  <q-item
    class="q-pl-sm"
    clickable
    :to="{ name:'Video', params:{ id: id }}"
    active-class="item-active"
  >
    <q-item-section avatar>
      <q-avatar style="height: 32px" rounded size="56px">
        <img :src="coverImage" />
      </q-avatar>
    </q-item-section>
    <q-item-section class="q-pl-sm">
      <q-item-label>{{ title }}</q-item-label>
      <q-item-label caption>{{ authorName }}</q-item-label>
    </q-item-section>
  </q-item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'video-item',
  props: {
    id: String,
    title: String,
    authorName: String,
    coverImage: String,
  },
});
</script>
<style lang="scss" scoped>
.item-active {
  color: $accent;
  border-left: 3px solid $accent;
}
</style>
